<template>
  <div class="goodsinfo-box">
    <Title title="退款单" style="margin-bottom:18px;"/>
    <el-row :class="{'dividing':!showMobilePage}" class="detail-row">
      <el-form label-position="right" label-width="125px">
        <el-col :span="8">
          <el-form-item label="退货编号(系统):">
            <ToolTip :content="data.systemSn" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退货编号(淘宝):">
            <ToolTip :content="data.taobaoSn" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交易金额(元):">
            <PriceColumn :real-val="data.payAmount" :price="data.payAmount / 100" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退款状态:">
            <span>{{ data.refundsStatus | formatRefundsStatus }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单编号:">
            <el-tooltip v-if="data.orderNum" class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ data.orderNum }}</div>
              <div class="ellipsis light-word" @click="toCommerceOrder(data)">{{ data.orderNum }}</div>
            </el-tooltip>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退款金额(元):">
            <PriceColumn :real-val="data.backAmount" :price="data.backAmount / 100" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退货状态:">
            <span>{{ data.returnsStatus | formatReturnGoods }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SKU编码:">
            <ToolTip :content="data.goodsCoding ? data.goodsCoding+(data.warehouse?`(${data.warehouse})`:'') : ''" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退货商品数量:">
            <span>{{ data.number || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货物状态:">
            <span>{{ data.goodsStatus | formatGoodsStatus }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题:">
            <ToolTip :content="data.title" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原因:">
            <ToolTip :content="data.reason" />
          </el-form-item>
        </el-col>
        <el-col :span="8" class="indentation-form-item">
          <el-form-item label="部分退款/全部退款:">
            <span>{{ data.partialOrFullrefund | formatRebates }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人:">
            <span>{{ data.creator || '--' }}</span>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { format } from '@/filters/date';
import { formatRefundsStatus, formatReturnGoods, formatGoodsStatus, formatRebates } from '@/filters/status';
import { mapState } from 'vuex';
export default {
  filters: { format, formatRefundsStatus, formatReturnGoods, formatGoodsStatus, formatRebates },
  components: { Title },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    toCommerceOrder(data) {
      if (!data.orderId) return;
      const routeUrl = this.$router.resolve({
        name: 'mengliOrderDetail',
        params: { id: data.orderId },
        query: { type: 2 }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.goodsinfo-box{
  margin-top: 20px;
}
::v-deep .el-col {
  .el-form-item{
    margin-bottom: 0;
  }
}
.indentation-form-item {
  ::v-deep .el-form-item {
    label {
      line-height: 1.2 !important;
    }
  }
}
.light-word {
  color: #406EFF;
  cursor: pointer;
}
.dividing {
  &::v-deep .el-col {
    .el-form-item__content {
      border-right: 1px solid #EBEEFD !important;
    }
    &:nth-child(3n) {
      .el-form-item__content {
        border-right: none !important;
      }
    }
    &:last-child {
      .el-form-item__content {
        border-right: none;
      }
    }
  }
}
</style>
